<template>
  <div class="bankcard-add page" ref="webview">
    <div ref="wrapper">
      <van-nav-bar class="bg_white" :title="($route.params.type === 'edit' ? '编辑' : '添加')+'银行卡'" left-arrow @click-left="$router.go(-1)" />
      <div class="bankcard">
        <div class="textName">请绑定持卡人本人的银行</div>
        <van-field v-model="form.name" label="姓名" input-align="right" clearable placeholder="请输入姓名" />
        <div class="bk active van-hairline--bottom" @click="isSelect=true">
          <span class="label">银行</span>
          <div class="name" :class="{active: form.bankName}">{{form.bankName || '请选择银行'}}</div>
        </div>
        <van-field v-model="form.accountNo" type="tel" label="银行卡号" input-align="right" clearable placeholder="输入银行卡号" />
        <van-field v-model="form.branchBank" label="银行支行" clearable input-align="right" placeholder="请输入银行支行名称" />
        <van-field v-model="form.mobile" type="tel" input-align="right" maxlength="11" clearable label="绑定手机" placeholder="请输入手机号码" />
        <!-- <div class="agreement">
        <van-checkbox v-model="IsAgreement" shape="square">同意</van-checkbox><span class="agreement-text" @click="isPopup=true;">《服务协议》</span>
      </div> -->
      </div>
      <div class="addCard">
        <van-button class="btn" round :loading="isLoading" @click.native="submitBank">添加</van-button>
      </div>
      <!-- <van-popup :duration="0.2" v-model="isPopup"  position="bottom" style="height:100%">
      <div class="bank-details">
        <div class="nav-bar">
          <van-nav-bar title="服务协议" @click-right="isPopup=false">
            <span class="van-icon van-icon-cross" slot="right" />
          </van-nav-bar>
        </div>
        <div class="content">
        </div>
      </div>
    </van-popup> -->
      <van-popup v-model="isSelect" :duration="duration" position="bottom" get-container="body">
        <van-picker :columns="list" show-toolbar :default-index="defaultIndex" title="银行卡列表" @cancel="isSelect= false" @confirm="pickerConfirm" />
      </van-popup>
    </div>
  </div>
</template>
<script>
export default {
  name: 'bankcardAdd',
  data () {
    return {
      duration: 0.2,
      isPopup: false,
      isSelect: false,
      IsAgreement: true,
      disabled: false,
      isLoading: false,
      defaultIndex: 0,
      form: {
        name: '',
        bankId: '',
        bankName: '',
        accountNo: '',
        branchBank: '',
        mobile: ''
      },
      list: []
    };
  },
  created () {
    this.getBanklist(() => {
      this.$route.params.type === 'edit' && this.getBankInfo();
    });
  },
  methods: {
    getBanklist (callbark) {
      this.$API.user.bank({ id: '' }, 'edit').then(res => {
        this.list = res.data.bankList.map((item, index) => {
          return {
            value: item.id,
            text: item.name
          };
        });
        callbark && callbark();
      });
    },
    pickerConfirm (data, index) {
      this.form.bankName = data.text;
      this.form.bankId = data.value;
      this.isSelect = false;
      this.defaultIndex = index;
    },
    getBankInfo () {
      this.$toast.loading({ duration: 0 });
      this.$API.user.bank({ id: this.$route.query.id }, 'edit').then(res => {
        var data = res.data.entity;
        this.form = {
          name: data.name,
          bankId: data.bankId,
          bankName: data.bankName,
          accountNo: data.accountNo,
          branchBank: data.branchBank,
          mobile: data.mobile
        };
        this.defaultIndex = this.list.findIndex(item => item.value === res.data.entity.bankId);
        this.$toast.clear();
      });
    },
    submitBank () {
      if (this.form.name === '') {
        this.$toast('请输入姓名');
        return;
      }
      if (this.form.bankName === '') {
        this.$toast('请输入银行名称');
        return;
      }
      if (this.form.accountNo === '') {
        this.$toast('请输入银行卡号');
        return;
      }
      if (this.form.branchBank === '') {
        this.$toast('请输入银行支行名称');
        return;
      }
      var isPhone = !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile));
      if (isPhone) {
        this.$toast('请输入正确的手机号!');
        return;
      }
      // if (!this.IsAgreement) {
      //   this.$toast('请阅读服务协议!');
      //   return;
      // }
      if (this.$route.params.type === 'edit') {
        this.form.id = this.$route.query.id;
      }
      this.form.type = 3;
      this.isLoading = true;
      this.$API.user.bank(this.form, 'save').then(res => {
        if (!res.code) {
          this.$toast((this.$route.params.type === 'edit' ? '修改' : '添加') + '成功');
          setTimeout(() => {
            this.$router.go(-1);
          }, 800);
        } else {
          this.$toast(res.message);
        }
        this.isLoading = false;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.bankcard-add {
  .agreement {
    padding: 30px 40px;
    font-size: 28px;
    display: flex;
    justify-content: flex-start;
    .agreement-text {
      color: #917eff;
    }
    .van-icon {
      border-radius: 4px;
    }
  }
  .textName {
    background-color: #f1f3f7;
    line-height: 76px;
    padding: 0 40px;
    color: #252525;
  }
  .bankName {
    background-color: #fff;
    display: flex;
    padding: 30px 40px;
    color: #323233;
    font-size: 28px;
    .label {
      width: 140px;
    }
    .name {
      flex: 1;
      color: #96989a;
      position: relative;
      &::after {
        content: '';
        display: inline-block;
        width: 14px;
        height: 24px;
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -12px;
        background-image: url('/static/images/icon-arrow-right.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 14px 24px;
        vertical-align: middle;
        margin-left: 32px;
      }
    }
    .name.active {
      color: #323233;
    }
  }
  .code {
    background: #917eff;
    border-radius: 50px;
    font-size: 24px;
    padding: 5px 20px;
    display: inline-block;
    color: #fff;
  }
  .code.disable {
    background-color: #dbdee6;
  }
  .addCard {
    color: #fff;
    font-size: 32px;
    text-align: center;
    position: fixed;
    bottom: calc(30px + env(safe-area-inset-bottom));
    left: 40px;
    right: 40px;
    .btn {
      width: 100%;
      background-color: #fff;
      color: #111;
    }
    .van-button__text {
      color: #125dff;
      font-size: 32px;
      &::before {
        display: inline-block;
        font-size: 40px;
        margin-right: 10px;
      }
    }
  }
}
</style>
